<script setup lang="ts">
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import { useElementSize } from "@vueuse/core";
import { useCacheStore } from "../../src/sde/cache";

const cacheStore = useCacheStore();
const { regions } = storeToRefs(cacheStore);

const target = ref<HTMLElement>();
const { height } = useElementSize(target);

const data = computed(() => {
  return regions.value.map((region) => {
    return {
      id: region.region_id,
      label: region.name,
      children: region.constellations.map((constellation) => {
        return {
          id: constellation.constellation_id,
          label: constellation.name,
          children: constellation.systems.map((system) => {
            return {
              id: system.system_id,
              label: system.name,
              children: [...system.stations, ...system.structs].map((station) => {
                return {
                  //@ts-ignore
                  id: station.station_id || station.structure_id,
                  //@ts-ignore
                  label: station.name + (station.type ? `(${station.type})` : ""),
                };
              }),
            };
          }),
        };
      }),
    };
  });
});
</script>

<template>
  <div ref="target" class="h-full">
    <el-tree-v2 :data="data" :height="height" highlight-current />
  </div>
</template>

<style scoped lang="scss"></style>
